import { defineComponent } from "vue";
import { ElSubmenu, ElMenuItem } from 'element-plus'

const osMenuItem = defineComponent({
  name: 'os-menu-item',
  props: {
    item: {
      type: Object,
      default: () => ({}),
      require: true
    }
  },
  components: { ElSubmenu, ElMenuItem },
  setup(props) {
    const { item } = props
    // 没有子选项时
    if (!item.children) {
      return () => <el-menu-item index={item.id}>{item.label}</el-menu-item>
    }
    // 插槽 = <span #title>{{item.label}}</span>
    const slots = {
      title: () => {
        return <span>{item.label}</span>
      }
    }
    // 递归子选项
    return () => <el-submenu index={item.id} v-slots={slots}>
      {
        item.children.map((child: any) => {
          return <osMenuItem item={child}></osMenuItem>
        })
      }
    </el-submenu>
  }
})
export default osMenuItem